<template>
  <div>
    <el-dialog :title="langTit" :visible.sync="langOpen" width="600px" append-to-body>
      <el-table :data="langDicts">
        <el-table-column label="配置项" align="center" prop="keyName"></el-table-column>
        <el-table-column label="配置情况" align="center" prop="configStatusName"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleSet(scope.row)"
            >配置信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="langTit" :visible.sync="setOpen" width="500px" append-to-body>
      <el-form ref="form" label-width="150px">
          <div class="tit">默认内容</div>
          <el-form-item :label="setCur.keyName">
            <img v-if="setCur.modelKeyType=='PIC'" :src="rowCur[setCur.key]" style="width: 150px;" />
            <div v-else>{{rowCur[setCur.key]}}</div>
          </el-form-item>

          <div class="tit">
            多语言配置 - {{setCur.keyName}}
            <span class="tip" v-if="setCur.modelKeyType=='PIC'">仅支持jpg、png、jpeg格式，且图片尺寸比例必须为16:9</span>
          </div>
          <el-form-item  v-for="(item, index) in langs" :key="index" :label="item.i18nChineseName+'('+item.nativeName+')'">

            <!-- SHORT_TXT-单行文本 MULTI_TXT-多行文本 RICH_TXT-富文本 PIC-图片 VOICE-语音 VIDEO-视频,可用值:SHORT_TXT,MULTI_TXT,RICH_TXT,VOICE,VIDEO,PIC -->

            <el-input v-if="setCur.modelKeyType=='SHORT_TXT'" v-model="item.content" placeholder="请输入" />
            <el-input v-if="setCur.modelKeyType=='MULTI_TXT'" type="textarea" :rows="5" v-model="item.content" placeholder="请输入" />
            <editor v-if="setCur.modelKeyType=='RICH_TXT'" v-model="item.content" :min-height="192"/>
            <div v-if="setCur.modelKeyType=='PIC'">
              <img v-if="item.content" :src="item.content" style="width:150px;" />
              <el-upload action="#" :http-request="function(file){return requestUpload(file, index)}" :show-file-list="false" :before-upload="beforeUpload">
                <el-button size="small">
                  上传图片
                  <i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-upload>
            </div>
            
          </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setSubmit">确 定</el-button>
        <el-button @click="setCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { langList, langData, langSave } from '@/api/common';
import { upload, removeFile } from '@/api/common';
export default {
  name: "Lang",
  data() {
    return {
      //多语言设置
      langOpen: false,
      langTit: '多语言配置',
      //type 1输入框 2图片上传 3富文本
      langDicts: [],
      setCur: {},
      setOpen: false,
      langs: [],
      rowCur: {},
      bizCode: ''

    }
  },
  created(){},
  methods: {
    init(row, code, name){
      this.langTit = name + ' - 多语言配置';
      this.langOpen = true;
      this.rowCur = row;
      this.bizCode = code;
      langList({
        bizCode: code,
        entityId: row.id
      }).then(res => {
        this.langDicts = res.data || [];
      })
    },
    handleSet(row){
      this.langs = [];
      this.setCur = row;
      this.setOpen = true;
      langData({
        entityId: row.entityId,
        key: row.key,
        modelCode: row.modelCode
      }).then(res => {
        this.langs = res.data.dataItemList || [];
      })
    },
    setSubmit(){
      let dataItemList = [];
      this.langs.forEach(item=>{
        dataItemList.push({
          content: item.content,
          i18nId: item.i18nId
        })
      })
      let row = this.setCur;
      langSave({
        bizCode: this.bizCode,
        dataItemList: dataItemList,
        entityId: row.entityId,
        entityId: row.entityId,
        key: row.key,
        modelCode: row.modelCode
      }).then(response => {
        this.$modal.msgSuccess("设置成功");
        this.setOpen = false;
        this.langOpen = false;
      });
    },
    setCancel(){
      this.setOpen = false;
    },
    requestUpload(e, index) {
      let formData = new FormData();
      formData.append('file', e.file);
      formData.append('path', 'user/info');
      upload(formData).then(res => {
        if(res.code=='00000'){
          this.langs[index].content = res.data.filePath;
          this.$modal.msgSuccess("上传成功");
        }
        else{
          this.$modal.msgError("上传失败");
        }
      });
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        return false
      } else {

      }
    }
  }
};
</script>
<style scoped>

</style>
